<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/login.css">
</head>
<body>
    <div class="nav">
        <img src="../image/头像.jpg" alt="头像">
        <span class="title">我的博客系统</span>
        <a href="home.html">主页</a>
        <a href="edit.html">创作</a>
        <a href="login.html" style="display: none;">注销</a>
    </div>
    <div id="one">
        <div class="login">
            <div class="text">登录</div>
            <div class="one"><span class="name">用户名</span><input type="text" class="user"></div>
            <div class="one"><span class="name">密码</span><input type="password" class="password"></div>
            <div class="one"><canvas width="200" height="40" id="matchesCanvas">
            </canvas>
            <input type="text" id="code"></div>
            <div class="submit"><button onclick="mathesVerify()">提交</button></div>
        </div>
    </div>
    <script>
        function randNumber(min,max){
            //随机数生成方法
            var res=parseInt(Math.random()*(max-min)+min);
            return(res);
        }
        function randColor(min,max){
            var r=randNumber(min,max);
            var g=randNumber(min,max);
            var b=randNumber(min,max);
            var colorRes="rgb(" + r + "," + g + "," + b + ")";
            return colorRes;
        }
        function mulMath(){
            //乘法
            var first=randNumber(1,20);
            var second=randNumber(5,15);
            return [first,second,'*']
        }
        function additionMath(){
            //加法
            var first=randNumber(20,99);
            var second=randNumber(3,99);
            return [first,second,'+']
        }
        function subMath(){
            //加法
            var first=randNumber(46,99);
            var second=randNumber(1,45);
            return [first,second,'-']
        }
        
        
        //给出计算结果
        var mathesResult=0;
        var width=0;
        var height=0;
        var cvas=matchesCanvas.getContext('2d');
        function re() {
            var matchesCanvas=document.getElementById('matchesCanvas');
            //获取计算题
            var mathList=[mulMath(),additionMath(),subMath()];
            var i=(randNumber(0,mathList.length));
            var maths=mathList[i]
            width=matchesCanvas.width-20;
            height=matchesCanvas.height;
            //先绘制背景色
            cvas.fillStyle='#CDC8B1';
            cvas.fillRect(0,0,width,height)
            //再绘制计算题
            cvas.fillStyle='#7F7F7F';
            var fontSize=26;
            cvas.font=fontSize+'px Arial';
            cvas.textBaseline='middle';
            cvas.fillText(maths[0],10,20);
            cvas.fillText(maths[2],50,20);
            cvas.fillText(maths[1],80,20);
            cvas.fillText('=?',120,20);
            if(i==0){
                var result=parseInt(maths[0])*parseInt(maths[1]);
            }else if(i==1){
                var result=parseInt(maths[0])+parseInt(maths[1]);
            }else{
                var result=parseInt(maths[0])-parseInt(maths[1]);
            }
            console.log(result);
            console.log(123);
            mathesResult=result;
        }
        re();
        function mathesVerify(){
            //计算型验证码，用户输入结果
            var codeInt=mathesResult;
            var inputCode=parseInt(document.getElementById('code').value);
            if(inputCode==codeInt){
                alert('计算结果：'+inputCode+'，通过验证。');
            }else{
                alert('很遗憾，未通过验证');
                
                re();
            }
        }
        //定义干扰信息的绘制方法
        function cvasInterfere(cvas,width,height){
            //干扰线
            for (var i=0;i<8;i++){
                cvas.beginPath();
                cvas.moveTo(randNumber(0,width),randNumber(0,height));
                cvas.lineTo(randNumber(0,width),randNumber(0,height));
                cvas.strokeStyle=randColor(180,220);
                cvas.closePath();
                cvas.stroke();
            }
            //干扰噪点
            for (var i=0;i<80;i++){
                cvas.beginPath();
               cvas.arc(randNumber(0,width),randNumber(0,height),1,0,2*Math.PI);
                cvas.closePath();
                cvas.fillStyle=randColor(150,250);
                cvas.fill();
            }
        }
        //在计算题绘制完成后，为验证码加上干扰线和噪点
        cvasInterfere(cvas,width,height)
        </script>
</body>
</html>